<template>
  <div>
    <div class="topbar bg-black py-2 px-4 d-flex ai-center">
      <img src="../assets/logo.png" alt="" height="30" />
      <div class="px-3 flex-1 d-flex text-white">
        <div class="">王者荣耀</div>
        <div class="px-4 flex-1">攻略站</div>
        <div class="">更多英雄 <span class="fs-xl">&gt;</span></div>
      </div>
    </div>
    <!-- 背景图 -->
    <div class="desc-show">
      <div class="bg-image">
        <div class="info h-100 d-flex flex-column text-white jc-end p-3">
          <div>{{model.title}}</div>
          <strong class="fs-xl py-1">{{model.name}}</strong>
          <div>{{model.categories.map(v=>v.name).join('')}}</div>
          <div class="d-flex ai-center">
            <div class="scores flex-1 py-1 fs-sm">
              难度<span class="edgeNum mx-1 bg-primary fs-xxs text-gray">{{model.scores.difficulty}}</span>
              技能<span class="edgeNum mx-1 bg-danger fs-xxs text-gray">{{model.scores.skill}}</span>
              攻击<span class="edgeNum mx-1 bg-blue-1  fs-xxs text-gray">{{model.scores.attack}}</span>
              生存<span class="edgeNum mx-1 bg-gray-1 fs-xxs text-gray">{{model.scores.survey}}</span>
            </div>
            <div class="pr-3 text-gray">皮肤：7 &gt;</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体介绍部分 -->
    <div class="d-flex flex-column">
      <div class="d-flex nav jc-around bg-white pt-3 pb-2">
        <div class="active nav-item">英雄初识</div>
        <div class="nav-item">进阶攻略</div>
      </div>
      <div class="bg-white border-bottom">
        <div class="d-flex jc-between mx-3 pt-3 border-top">
          <router-link to="/" class="btn-lg px-4 flex-1 mr-2" tag="button">
            <i class="iconfont icon-video text-primary mr-3 fs-lg"></i>
            <span class="text-dark-1">英雄介绍视频</span>
          </router-link>
          <router-link to="/" class="btn-lg py-2 px-3 flex-1" tag="button">
            <i class="iconfont icon-card-hero text-primary mr-3"></i>
            <span class="text-dark-1">一图识英雄</span>
          </router-link>
        </div>
        <div class="mx-3">
          <div class="d-flex jc-around mt-4">
            <img :src="item.icon" @click="currentSkillIndex = i" width="60" height="60" v-for="(item,i) in model.skills"
              :key="i">
          </div>
          <div v-if="currentSkill" class="mt-5">
            <div class="d-flex">
              <div class="fs-lg mr-4"><strong>{{currentSkill.name}}</strong></div>
              <div class="fs-sm text-gray">(冷却值：{{currentSkill.cd}} 消耗值：{{currentSkill.consume}})</div>
            </div>
            <p>{{currentSkill.description}}</p>
          </div>
        </div>
      </div>
      <m-card plain icon="news" title="出装顺序">
        <div class="fs-lg pb-2">顺风出装</div>
        <div class="d-flex jc-between items">
          <img :src="item.icon" width="45" height="45" v-for="(item,i) in model.items1" :key="i">
        </div>
        <div class="d-flex jc-between fs-xxs pt-2 border-bottom">
          <div v-for="(item,i) in model.items1" :key="i">{{item.name}}</div>
        </div>
        <div class="fs-lg pb-2 pt-4">逆风出装</div>
        <div class="d-flex jc-between items">
          <img :src="item.icon" width="45" height="45" v-for="(item,i) in model.items2" :key="i">
        </div>
        <div class="d-flex jc-between fs-xxs pt-2">
          <div v-for="(item,i) in model.items2" :key="i">{{item.name}}</div>
        </div>
      </m-card>
      <m-card plain icon="news" title="使用技巧">
        <p class="m-0">{{model.usageTips}}</p>
      </m-card>
      <m-card plain icon="news" title="对抗技巧">
        <p class="m-0">{{model.battleTips}}</p>
      </m-card>
      <m-card plain icon="news" title="团战思路">
        <p class="m-0">{{model.teamTips}}</p>
      </m-card>
      <m-card plain icon="news" title="英雄关系">
        <div class="fs-xl pb-3">最佳搭档</div>
        <div class="d-flex mb-3" v-for="(item,i) in model.patners" :key="i">
          <img :src="item.hero.avatar" width="50" height="50" alt="">
          <p class="pl-3 m-0">{{item.description}}</p>
        </div>
      </m-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true }
  },
  data () {
    return {
      model: {
        categories: [],
        scores: {},
        skills: []
      },
      currentSkillIndex: 0
    }
  },
  computed: {
    currentSkill () {
      return this.model.skills[this.currentSkillIndex]
    }
  },
  methods: {
    async fetch () {
      const res = await this.$http.get(`heroes/${this.id}`)
      this.model = res.data
      console.log(res)
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/_variables.scss';

.desc-show {
  .bg-image {
    background: #fff no-repeat top center;
    height: 46vw;
    width: auto;
    background-size: contain;
    background-image: url(../assets/bg-image.jpg);
    .info {
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }
  }
}
.scores {
  .edgeNum {
    display: inline-block;
    width: 1.0769rem;
    height: 1.0769rem;
    line-height: 1.0769rem;
    text-align: center;
    border-radius: 50%;
  }
}
.btn-lg {
  border: 1px solid $border-color;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: map-get($colors, 'gray-2');
}
.items {
  img {
    border-radius: 50%;
  }
}
</style>
